{% extends 'base.html' %}

{% block title %}Music Box - Home{% endblock %}

{% block content %}
    <h1 class="mb-4">
        <i class="fas fa-music mr-2"></i>Music Collection
    </h1>

    <div class="row">
        {% for music in music_list %}
            <div class="col-md-4 col-sm-6">
                <div class="music-card">
                    <img src="{{ music.cover }}" alt="{{ music.title }}">
                    <div class="music-info">
                        <div class="music-title">{{ music.title }}</div>
                        <div class="music-artist">{{ music.artist }}</div>
                        <button class="play-btn" data-index="{{ loop.index0 }}">
                            <i class="fas fa-play"></i>
                        </button>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}

